<template>
  <div class="app-container">
    <el-card class="box-card">
    <el-form label-width="120px" :model="teacher" :rules="rules" ref="teacher">
      <el-form-item label="讲师名称" prop="name"
                    style="width: 450px">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="讲师排序" prop="sort">
        <el-input-number
          v-model="teacher.sort"
          controls-position="right"
        />
      </el-form-item>

      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="teacher.level" clearable placeholder="请选择" >
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>

      <el-form-item label="讲师资历" prop="career" style="width: 450px">
        <el-input v-model="teacher.career" />
      </el-form-item>
      <el-form-item label="讲师简介" prop="intro" style="width: 450px">
        <el-input v-model="teacher.intro" :rows="10" type="textarea" />
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <el-form-item label="讲师头像">
        <el-upload
          :show-file-list="false"
          :action="BASE_API+'/edu_oss/upload/avatar'"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          class="avatar-uploader">
          <img :src="dialogImageUrl" v-if="dialogImageUrl" class="avatar">
<!--          <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        </el-upload>
      </el-form-item>

      <!-- 保存 -->
      <el-form-item>
        <el-button
          type="primary"
          @click="saveOrUpdate('teacher')"
          >保存</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>
<script>
import teacherApi from "@/api/edu/teacher";

// 上传组件模块
import ImageCropper from '@/components/ImageCropper';
import PanThumb from '@/components/PanThumb'

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      teacher: {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      rules:{
        name: [{ required: true, message: '请输入讲师名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入讲师排序信息', trigger: 'blur' }],
        level: [{ required: true, message: '请输入讲师头衔', trigger: 'blur' }],
        career: [{ required: true, message: '请输入讲师资历', trigger: 'blur' }],
        intro: [{ required: true, message: '请输入讲师简介', trigger: 'blur' }]
      },
      saveBtnDisabled: false, // 保存按钮重复提交
      BASE_API: process.env.BASE_API,
      // 上传弹框组件是否显示
      imagecropperShow: false,

      // 上传组件唯一标识
      imagecropperKey: 0,

      // 保存按钮是否禁用
      // saveBtnDisabled: false,
      dialogImageUrl: ''
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      this.init();
    },
  },
  methods: {
    // 上传封面成功调用的方法
    handleAvatarSuccess(res, file) {
      this.teacher.avatar = res.data.url
      this.$message({
        type: 'success',
        message: '头像上传成功'
      })
      this.dialogImageUrl = this.teacher.avatar
    },
    // 上传之前调用的方法
    beforeAvatarUpload(file) {
      const  isJPG = file.type === 'image/jpeg'
      const  isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是jpg格式')
      }
      if (!isLt2M) {
        this.$message.error('上传图片不能大于2M')
      }
      return isLt2M && isJPG
    },
    // 初始化数据
    init() {
      if (this.$route.params && this.$route.params.id) {
        // 从路径获取id值
        const id = this.$route.params.id;
        // 调用根据id查询的方法
        this.getInfo(id);
      } else {
        this.teacher = {};
        this.dialogImageUrl = 'https://cdn.jsdelivr.net/gh/CodeZixuan/Blog_Images/IO/2021-04-05_19-06-18.png'
        this.teacher.avatar = this.dialogImageUrl
      }
    },
    // 根据讲师id查询
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
        .then((res) => {
        this.teacher = res.data.teacher;
        this.dialogImageUrl = this.teacher.avatar
        // console.log(res.data.teacher);
      });
    },
    saveOrUpdate(teacher) {
      this.$refs[teacher].validate(valid => {
        console.log(valid)
        if (valid) {
          if (!this.teacher.id) {
            // 添加
            this.saveTeacher();
          } else {
            // 修改
            this.updateTeacher();
          }
        } else {
          return false;
        }
      })
      // 判断修改还是添加

    },
    // 添加讲师方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher).then((res) => {
        // 提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        // 返回列表页面
        this.$router.push({ path: "/teacher/table" });
      });
    },
    updateTeacher() {
      teacherApi.updateTeacherInfo(this.teacher).then((res) => {
        // 提示信息
        this.$message({
          type: "success",
          message: "修改数据成功!",
        });
        // 返回列表页面
        this.$router.push({ path: "/teacher/table" });
      });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

